import React from "react";
import { getProductById } from "../../../lib/data";

export const revalidate = 300;

interface Props { params: { id: string } }

export function generateMetadata({ params }: Props) {
  const data = getProductById(params.id);
  return {
    title: data ? `${data.product.name} - LOG` : `产品 - LOG`,
    description: data?.product.description ?? "产品详情"
  };
}

export default function ProductPage({ params }: Props) {
  const data = getProductById(params.id);
  if (!data) {
    return (
      <div className="mx-auto max-w-screen-md px-4 py-12">
        <h1 className="text-2xl font-semibold">产品未找到</h1>
        <a className="mt-6 inline-block text-blue-600" href="/">返回首页</a>
      </div>
    );
  }

  const { product, floor } = data;
  return (
    <div className="mx-auto max-w-screen-md px-4 py-8">
      <div className="text-sm text-gray-600 mb-4">
        <a href="/">首页</a> / <a href={`/channel/${floor.id.replace(/^floor-/, '')}`}>{floor.title}</a> / <span>{product.name}</span>
      </div>
      <div className="grid md:grid-cols-2 gap-6">
        <img src={product.image} alt={product.name} className="w-full object-cover rounded-lg aspect-square bg-white" />
        <div className="space-y-4">
          <h1 className="text-2xl font-semibold">{product.name}</h1>
          {product.description && <p className="text-gray-600">{product.description}</p>}
          {product.price != null && <div className="text-rose-600 text-xl font-semibold">¥{product.price}</div>}
          <div className="pt-4">
            <button className="px-5 py-2.5 rounded bg-black text-white">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  );
}